<template>
    <div class="guide">
        <div class="guide-box">
            <Dao :gotowhere="gotowhere" :path="'/main'" :width="50" :speed="5" :interval="500" ></Dao>
            <el-carousel class="carousel">
                <el-carousel-item v-for="(item,index) in banners" :key="index">
                    <img :src="item.imageUrl" class="g-img" alt="">
                </el-carousel-item>
            </el-carousel>
        </div>  
    </div>
</template>

<script lang="ts" setup>
import {onMounted, reactive, Ref , ref, toRefs } from 'vue'
import request from '../../api/request'
import { useHookOne } from '../../hooks/MyHookOne';
import { Http } from '../../api/api';
const {gotowhere , getWeekInYear } = useHookOne()

// const banners:Ref<Array<any>> = ref([])
let state = reactive<any>({
    banners:[]
})   
const getBannerData = async ()=>{
    
    // let res = await request.get('http://121.196.235.163:3000/banner') as unknown as any;
    let res = await Http.getBanner() as unknown as any;
    // console.log(res)
    // banners.value  = res.data.banners ; 
    // state.banners  = res.data.banners ; 
    state.banners  = res.banners ; 

}

const  {banners } = toRefs(state)   
onMounted(()=>{

    
    let week:any = getWeekInYear()
    let localweek = localStorage.getItem('localweek')  
    if(localweek){
        if(week!=localweek){
            localStorage.setItem('localweek',week);
        }else{
            
            gotowhere('/main')
        }
    }else{
        localStorage.setItem('localweek',week);
    }

    getBannerData()
})

</script>


<style lang="scss" scoped>
.guide{
    width:100%;
    height:100%;
    .guide-box{
        width:80%;
        margin:100px auto;
        border:1px solid #ddd;
        border-radius:10px;
        height:450px;
        position: relative;
        .carousel{
            width:100%;
            height:100%;
            ::v-deep .el-carousel__container{
                height:100%;
            }
        }
        .g-img{
            width:100%;
            height:100%;
        }
    }
}
</style>

